import 'package:aone_common/common.dart';
import 'package:aone_common/dto/webui/favorite.dart';
import 'package:aone_common/entities/webui/get_all_games.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';

import '../../../components/v_loading.dart';
import '../../../theme/custom_theme.dart';
import '../widgets/favorite_icon_btn.dart';
import '../widgets/player_count.dart';
import '../widgets/rating_bar.dart';
import '../widgets/start_game_button.dart';

class CategoryGridView extends StatelessWidget {
  const CategoryGridView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = GameCategoryLogic.to;
    final state = GameCategoryLogic.to.state;
    final favLogic = FavoriteLogic.to;

    return RefreshIndicator(
      onRefresh: () => Future.sync(
        () => state.pagingController.refresh(),
      ),
      child: PagedGridView(
        addAutomaticKeepAlives: true,
        addRepaintBoundaries: true,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 10.w,
          mainAxisSpacing: 15.h,
          childAspectRatio: 0.74,
        ),
        padding: EdgeInsets.symmetric(horizontal: 20.w),
        pagingController: state.pagingController,
        builderDelegate: PagedChildBuilderDelegate<AllGameItem>(
          itemBuilder: (BuildContext context, item, int index) {
            return Container(
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                  color: CustomTheme.colorSchema.secondary,
                  borderRadius: BorderRadius.circular(10.0),
                  boxShadow: [
                    CustomTheme.boxShadowSm,
                  ]),
              child: Column(
                children: [
                  Stack(
                    children: [
                      CachedNetworkImage(
                        fit: BoxFit.fill,
                        width: 162.w,
                        height: 162.w,
                        imageUrl: item.imgCn!,
                      ),
                      Positioned(
                        bottom: 8,
                        left: 8,
                        child: PlayerCountLabel(count: item.number!),
                      ),
                      Positioned(
                        bottom: 0,
                        right: 0,
                        child: GestureDetector(
                          child: SizedBox(
                            width: 34.w,
                            height: 34.w,
                            child: favoriteIcon(item.isCollect!),
                          ),
                          onTap: () {
                            logic.toggleFavorite(
                              payload: FavoriteDto(
                                gameSubId: item.gameSubId,
                                isCollect: item.isCollect,
                              ),
                              subTag: item.subTag!,
                            );
                            favLogic.getFavoriteList(noLoading: true);
                          },
                        ),
                      )
                    ],
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                        vertical: 7.0,
                        horizontal: 8.0,
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          Text(
                            item.nameCn!,
                            textAlign: TextAlign.start,
                            style: TextStyle(
                              fontSize: 16.sp,
                              fontWeight: FontWeight.w500,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Rating(heat: item.heat!),
                              StartGameButton(params: item),
                            ],
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
          animateTransitions: true,
          firstPageProgressIndicatorBuilder: (_) =>
              Center(child: customLoading()),
        ),
      ),
    );
  }
}
